<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>新机详情App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/css/oa-app.css">
<link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
<head>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
        .td-title {
            background-color: #f5f5f5;
        }

        .text-left {
            text-align: left;
        }

        tr td:nth-of-type(2) {
            color: #228bee;
            text-align: left;
        }

        tr td:nth-of-type(4) {
            color: #228bee;
            text-align: left;
        }

        .tableTop {
            border-top: hidden;
            border-bottom: hidden;
        }
        a{
            text-decoration: none;
        }

    </style>
</head>
<body>
<div id="app" v-cloak>
    <!--基本信息-->
    <table class="oa-table tableTop " style="border-top: 1px solid #cbcbcd">
        <thead>
        <tr class="oa-table-title">
            <th>基本信息</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table ">
        <thead>
        <tr>
            <td class="td-title">购车公司</td>
            <td colspan="3" style="text-align: left;">{{sampleParmsList.main.companyName}}</td>

        </tr>
        <tr>
            <td class="td-title">品牌</td>
            <td>{{sampleParmsList.main.brandName}}</td>
            <td class="td-title">设备类型</td>
            <td>{{sampleParmsList.main.deviceTypeName}}</td>
        </tr>
        <tr>
            <td class="td-title">型号</td>
            <td>{{sampleParmsList.main.modelName}}</td>
            <td class="td-title">吨位(吨)</td>
            <td>{{sampleParmsList.main.tonConfig}}</td>
        </tr>
        <tr>
            <td class="td-title">序列号</td>
            <td colspan="3" class="oa-lineOne " style="text-align: left;" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.sequence}}
            </td>
        </tr>
        <tr>
            <td class="td-title">配置号</td>
            <td>{{sampleParmsList.main.configurationNo}}</td>
            <td class="td-title">斗容</td>
            <td>{{sampleParmsList.main.bucketCapacity}}</td>

        </tr>
        <tr>
            <td class="td-title">铲斗类型</td>
            <td colspan="3" class="oa-lineOne" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.bucketType}}
            </td>


        </tr>
        <tr>
            <td class="td-title">订单类型</td>
            <td>{{sampleParmsList.main.orderType}}</td>
            <td class="td-title">状态</td>
            <td>{{sampleParmsList.main.state}}</td>

        </tr>
        <tr>
            <td class="td-title">生产日期</td>
            <td>{{sampleParmsList.main.productionDate}}</td>
            <td class="td-title">入库日期</td>
            <td style="text-align: left;">{{formatDate(sampleParmsList.main.stockTime)}}</td>
        </tr>
        <tr>
            <td class="td-title">随机配件</td>
            <td>{{sampleParmsList.main.deviceParts}}</td>
            <td class="td-title">随机附件</td>
            <td>{{sampleParmsList.main.deviceAnnex}}</td>
        </tr>
        <tr>
            <td class="td-title">实际交车日期</td>
            <td>{{formatDate(sampleParmsList.main.actualDeliveryDate)}}</td>
            <td class="td-title">在库时长</td>
            <td>{{dateCha(sampleParmsList.main.actualDeliveryDate,sampleParmsList.main.stockTime)}}</td>
        </tr>
       <!-- <tr>
            <template v-if="sampleParmsList.main.deviceTypeName.indexOf('破碎锤') >= 0">
                <td class="td-title">钎杆直径</td>
                <td colspan="3">{{sampleParmsList.main.drillDiameter}}</td>
            </template>
            <template v-if="sampleParmsList.main.deviceTypeName.indexOf('筛分机') >= 0 || sampleParmsList.main.deviceTypeName.indexOf('破碎机') >= 0">
                <td class="td-title">最大处理量</td>
                <td colspan="3">{{sampleParmsList.main.maxCapacity}}</td>
            </template>
        </tr>-->
        <tr>
            <td class="td-title">库存地</td>
            <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.storeAddress}}
            </td>
        </tr>
        <tr>
            <td class="td-title">铭牌照片</td>
            <td colspan="3" class="text-left">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="sampleParmsList.main.namePlateAttachUrl">
                        <b :class="fjStyle(sampleParmsList.main.namePlateAttachUrl)"></b>
                        <div class="name" style="width: 165px;" :title="sampleParmsList.main.namePlateAttachName"
                             v-on:click="look(sampleParmsList.main.namePlateAttachUrl)">
                            {{sampleParmsList.main.namePlateAttachName}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(sampleParmsList.main.namePlateAttachUrl)">下载</a>
                        </div>
                    </div>
                <!--<a href="javascript:void(0);" @click.stop="showMore($event.target)" @click="look(sampleParmsList.main.namePlateAttachUrl)" style="color: #2a8cec;">
                    {{sampleParmsList.main.namePlateAttachName}}
                </a>-->
            </td>
        </tr>

        <tr>
            <td class="td-title">描述</td>
            <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.description}}
            </td>
        </tr>

        <tr class="oa-lineTwo-H">
            <td class="td-title">备注</td>
            <td colspan="3" class="oa-lineOne" style="text-align: left;padding-left: 4px" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.remark}}
            </td>
        </tr>

        </thead>
    </table>
    <!--提货及应付信息-->
    <template v-if="roleName=='订货支持'||roleName=='后台管理'">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>提货及应付信息</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table">
            <tbody>
            <tr v-if="roleName=='订货支持'">
                <td class="td-title">提货日期</td>
                <td>{{formatDate(sampleParmsList.main.pickUpDate)}}</td>
                <td class="td-title">提货价格(元)</td>
                <td>{{sampleParmsList.main.pickupPrice}}</td>
            </tr>
            <tr v-else>
                <td class="td-title">提货日期</td>
                <td colspan="3">{{formatDate(sampleParmsList.main.pickUpDate)}}</td>
            </tr>
            <tr v-for="(attach,i) in sampleParmsList.attaches">
                <td class="td-title oa-lineTwo-H" style="line-height: 22px">提货合同/协议/邮件</td>
                <td colspan="3" class="text-left" >
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="attach.url">
                        <b :class="fjStyle(attach.url)"></b>
                        <div class="name" style="width: 165px;" :title="attach.name"
                             v-on:click="look(attach.url)">
                            {{attach.name}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(attach.url)">下载</a>
                        </div>
                    </div>
                    <!--<a href="javascript:void(0);" class="oa-lineTwo" @click="look(attach.url)"
                       class="name" :title="attach.name"
                       :title="attach.name" style="color: #2a8cec;">{{attach.name}}</a>-->
                </td>
            </tr>
            <tr>
                <td class="td-title">发票附件</td>
                <td colspan="3" class="text-left">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="sampleParmsList.main.invoiceAttachUrl">
                        <b :class="fjStyle(sampleParmsList.main.invoiceAttachUrl)" ></b>
                        <div class="name" style="width: 165px;" :title="sampleParmsList.main.invoiceAttachName"
                             v-on:click="look(sampleParmsList.main.invoiceAttachUrl)">
                            {{sampleParmsList.main.invoiceAttachName}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(attach.url)">下载</a>
                        </div>
                    </div>
                  <!--  <a href="javascript:void(0);"
                                                     @click="look(sampleParmsList.main.invoiceAttachUrl)"
                                                     style="color: #2a8cec;">{{sampleParmsList.main.invoiceAttachName}}</a>-->
                </td>

            </tr>
            <tr>
                <td class="td-title">合格证</td>
                <td colspan="3" class="text-left">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="sampleParmsList.main.certificationAttachUrl">
                        <b :class="fjStyle(sampleParmsList.main.invoiceAttachUrl)"></b>
                        <div class="name" style="width: 165px;" :title="sampleParmsList.main.certificationAttachName"
                             v-on:click="look(sampleParmsList.main.certificationAttachUrl)">
                            {{sampleParmsList.main.certificationAttachName}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(sampleParmsList.main.certificationAttachUrl)">下载</a>
                        </div>
                    </div>
                    <!--<a href="javascript:void(0);"
                                                     @click="look(sampleParmsList.main.certificationAttachUrl)"
                                                     style="color: #2a8cec;">{{sampleParmsList.main.certificationAttachName}}</a>-->
                </td>
            </tr>
            <tr>
                <td class="td-title">付款方式</td>
                <td>{{sampleParmsList.main.payment}}</td>
                <td class="td-title">免息期到期日</td>
                <td>{{dateFormat(sampleParmsList.main.freeMaturityDate)}}</td>
            </tr>
            <tr>
                <td class="td-title">客户是否融资</td>
                <td>{{sampleParmsList.main.financing}}</td>
                <td class="td-title" style="line-height: 18px">融资放款金额(元)</td>
                <td>{{sampleParmsList.main.financingAmount}}</td>
            </tr>
            <tr>
                <td class="td-title">是否已结清</td>
                <td colspan="3">{{sampleParmsList.main.settle}}</td>
            </tr>
            <tr class="oa-lineTwo-H">
                <td style="background: #f8f8f8">备注</td>
                <td colspan="3" class="oa-lineOne" style="text-align: left;padding-left: 4px" @click.stop="showMore($event.target)">
                    {{sampleParmsList.main.accessoriesRemark}}
                </td>
            </tr>
            </tbody>
        </table>
    </template>
    <!--到期还款计划-->
    <template v-if="roleName=='订货支持'||roleName=='后台管理'" v-for="(item,i) in RepaymentPlanList">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>到期还款计划</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table" >
            <tbody>
            <tr>
                <td class="td-title">预计付款日期</td>
                <td>{{formatDate(item.expirationDate)}}</td>
                <td class="td-title" style="line-height: 18px">预计付款金额(元)</td>
                <td>{{item.expirationMoney}}</td>
            </tr>
            <tr>
                <td class="td-title">收款方</td>
                <td colspan="3">{{item.payee}}</td>

            </tr>
            <tr>
                <td class="td-title">开户银行</td>
                <td colspan="3">{{item.accountName}}</td>
            </tr>
            <tr>
                <td class="td-title">账号</td>
                <td colspan="3">{{item.payeeAccount}}</td>
            </tr>
            <tr>
                <td class="td-title">付款日期</td>
                <td>{{formatDate(item.paymentDate)}}</td>
                <td class="td-title">付款金额(元)</td>
                <td>{{item.paymentMoney}}</td>
            </tr>
            <tr>
                <td class="td-title">还款凭证</td>
                <td colspan="3">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="item.repaymentCertificateAttachUrl">
                        <b :class="fjStyle(item.repaymentCertificateAttachUrl)"></b>
                        <div class="name" style="width: 165px;" :title="item.repaymentCertificateAttachName"
                             v-on:click="look(item.repaymentCertificateAttachUrl)">
                            {{item.repaymentCertificateAttachName}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(item.repaymentCertificateAttachUrl)">下载</a>
                        </div>
                    </div>
                   <!-- <a href="javascript:void(0);" @click="look(item.repaymentCertificateAttachUrl)"
                                   style="color: #2a8cec;">{{item.repaymentCertificateAttachName}}</a>-->
                </td>
            </tr>
            <tr class="oa-lineTwo-H">
                <td class="td-title">备注</td>
                <td colspan="3" class="oa-lineOne" style="text-align: left;padding-left: 4px" @click.stop="showMore($event.target)">{{item.remark}}</td>
            </tr>
            </tbody>
        </table>
    </template>
    <!--入库物流信息-->
    <table class="oa-table tableTop">
        <thead>
        <tr class="oa-table-title">
            <th>入库物流信息</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table">
        <tbody>
        <tr>
            <td class="td-title">出发地</td>
            <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.trafficStarting}}
            </td>

        </tr>
        <tr>
            <td class="td-title">厂家联系人</td>
            <td>{{sampleParmsList.main.factoryContacts}}</td>
            <td class="td-title">电话</td>
            <td>{{sampleParmsList.main.factoryTel}}</td>
        </tr>
        <tr>
            <td class="td-title">目的地</td>
            <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.trafficDestination}}
            </td>

        </tr>
        <tr>
            <td class="td-title">接车联系人</td>
            <td>{{sampleParmsList.main.shuttleContacts}}</td>
            <td class="td-title">电话</td>
            <td>{{sampleParmsList.main.shuttleTel}}</td>
        </tr>
        <tr>
            <td class="td-title">运输公司</td>
            <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.transportCompany}}
            </td>

        </tr>
        <tr>
            <td class="td-title">运输公司联系人</td>
            <td>{{sampleParmsList.main.contacts}}</td>
            <td class="td-title">电话</td>
            <td>{{sampleParmsList.main.telephone}}</td>
        </tr>
        <template >
            <tr>
                <td class="td-title" style="line-height: 18px">运费(含专票)/元</td>
                <td>{{sampleParmsList.main.specialFee}}</td>
                <td class="td-title">扣款(元)</td>
                <td>{{sampleParmsList.main.deductionFee}}</td>
            </tr>
            <tr>
                <td class="td-title">扣款说明</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{sampleParmsList.main.deductionRemark}}
                </td>
            </tr>
        </template>
        <tr>
            <td class="td-title">板车车牌</td>
            <td class="oa-lineOne" @click.stop="showMore($event.target)">{{sampleParmsList.main.drayLicense}}</td>
            <td class="td-title">运输开始日期</td>
            <td>{{formatDate(sampleParmsList.main.transportStartTime)}}</td>
        </tr>
        <tr>
            <td class="td-title">运输结束日期</td>
            <td>{{sampleParmsList.main.transportEndTime}}</td>
            <td class="td-title">司机姓名</td>
            <td>{{sampleParmsList.main.driverName}}</td>
        </tr>
        <tr>
            <td class="td-title">司机电话</td>
            <td>{{sampleParmsList.main.driverTel}}</td>
            <td class="td-title">司机证件</td>
            <td>{{sampleParmsList.main.driverAttachName}}</td>
        </tr>
        <tr >
            <td class="td-title">板车及设备照片</td>
            <td colspan="3" class="oa-lineOne text-left"><div v-for="(attach,i) in sampleParmsList.devicePictures">
                <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="attach.url">
                    <b :class="fjStyle(attach.url)"></b>
                    <div class="name" style="width: 165px;" :title="attach.name"
                         v-on:click="look(attach.url)">
                        {{attach.name}}
                    </div>
                    <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                         v-on:click="look(attach.url)">下载</a>
                    </div>
                </div>
               <!-- <a href="javascript:void(0);" @click="look(attach.url)"
                                                                                                                      style="color: #2a8cec;">{{attach.name}}</a>--></div>
            </td>
        </tr>
        </tbody>
    </table>
    <!--出库记录-->
    <template v-if="outboundParmsList&&outboundParmsList.main.id">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>出库记录</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table">
            <tbody>
            <tr>
                <td class="td-title">出库类型</td>
                <td>销售出库</td>
                <td class="td-title">出库时间</td>
                <td>{{dateFormat(outboundParmsList.main.createTime)}}</td>
            </tr>
            <tr>
                <td class="td-title">销售合同</td>
                <td colspan="3">{{contract.contractNo}}</td>
            </tr>
            <tr>

                <td class="td-title">交付客户</td>
                <td colspan="3">{{contract.buyer}}</td>
            </tr>
            <tr>
                <td class="td-title">区域经理</td>
                <td>{{contract.regionManagerName}}</td>
                <td class="td-title">电话</td>
                <td>{{contract.buyerTel}}</td>
            </tr>
            <tr>
                <td class="td-title">提车地址</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.pickUpAddress}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{outboundParmsList.main.pickUpContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{outboundParmsList.main.pickUpTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">交车地址</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.delivery_address}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{outboundParmsList.main.deliveryContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{outboundParmsList.main.deliveryTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">运输公司</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.transport_company}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{outboundParmsList.main.contacts}}</td>
                <td class="td-title">电话</td>
                <td>{{outboundParmsList.main.telephone}}</td>
            </tr>
            <tr>
                <td class="td-title">板车车牌</td>
                <td>{{outboundParmsList.main.dray_license}}</td>
                <td class="td-title">司机姓名</td>
                <td>{{outboundParmsList.main.driver_name}}</td>

            </tr>
            <tr>
                <td class="td-title">司机电话</td>
                <td colspan="3" style="text-align: left">{{outboundParmsList.main.driver_tel}}</td>
            </tr>
            <tr>
                <td class="td-title">运费(含专票)/元</td>
                <td>{{outboundParmsList.main.special_fee}}</td>
                <td class="td-title">扣款(元)</td>
                <td>{{outboundParmsList.main.deduction_fee}}</td>
            </tr>
            <tr>
                <td class="td-title">扣款说明</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.deduction_remark}}
                </td>
            </tr>
            <tr>
                <td class="td-title">运输开始日期</td>
                <td>{{formatDate(outboundParmsList.main.transportStartTime)}}</td>
                <td class="td-title">运输结束日期</td>
                <td>{{formatDate(outboundParmsList.main.transportEndTime)}}</td>
            </tr>
            <tr v-for="(attach,i) in outboundParmsList.certificates">
                <td class="td-title">司机证件</td>
                <td colspan="3">{{attach.name}}</td>
            </tr>
            <tr v-for="(attach,i) in outboundParmsList.devicePictures">
                <td class="td-title">板车及设备照片</td>
                <td colspan="3" class="oa-lineOne text-left">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="attach.url">
                        <b :class="fjStyle(attach.url)"></b>
                        <div class="name" style="width: 165px;" :title="attach.name"
                             v-on:click="look(attach.url)">
                            {{attach.name}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(attach.url)">下载</a>
                        </div>
                    </div>
                   <!-- <a href="javascript:void(0);" @click="look(attach.url)"
                                                                style="color: #2a8cec;">{{attach.name}}</a>--></td>
            </tr>
            <tr class="oa-lineTwo-H">
                <td class="td-title">备注</td>
                <td colspan="3" class="oa-lineOne" style="text-align: left;padding-left: 4px" @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.remark}}
                </td>

            </tr>
            </tbody>
        </table>
    </template>
    <!--退货记录-->
    <template v-if="exitParmsList&&exitParmsList.main.id">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>退货记录</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table">
            <tbody>
            <tr>
                <td class="td-title">出库类型</td>
                <td>退货</td>
                <td class="td-title">出库时间</td>
                <td>{{dateFormat(exitParmsList.main.createTime)}}</td>
            </tr>

            <tr>
                <td class="td-title">原库存地</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.pickUpAddress}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{exitParmsList.main.pickUpContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{exitParmsList.main.pickUpTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">新库存地</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.delivery_address}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{exitParmsList.main.deliveryContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{exitParmsList.main.deliveryTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">运输公司</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.transport_company}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{exitParmsList.main.contacts}}</td>
                <td class="td-title">电话</td>
                <td>{{exitParmsList.main.telephone}}</td>
            </tr>
            <tr>
                <td class="td-title">板车车牌</td>
                <td colspan="3">{{exitParmsList.main.dray_license}}</td>

            </tr>
            <tr>
                <td class="td-title">司机姓名</td>
                <td>{{exitParmsList.main.driver_name}}</td>
                <td class="td-title">司机电话</td>
                <td>{{exitParmsList.main.driver_tel}}</td>
            </tr>
            <tr>
                <td class="td-title">运费(含专票)/元</td>
                <td>{{exitParmsList.main.special_fee}}</td>
                <td class="td-title">扣款(元)</td>
                <td>{{exitParmsList.main.deduction_fee}}</td>
            </tr>
            <tr>
                <td class="td-title">扣款说明</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.deduction_remark}}
                </td>
            </tr>
            <tr>
                <td class="td-title">运输开始日期</td>
                <td>{{formatDate(exitParmsList.main.transportStartTime)}}</td>
                <td class="td-title">运输结束日期</td>
                <td>{{formatDate(exitParmsList.main.transportEndTime)}}</td>
            </tr>
            <tr >
                <td class="td-title">司机证件</td>
                <td colspan="3" class="oa-lineOne text-left"><div v-for="(attach,i) in exitParmsList.certificates">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="attach.url">
                        <b :class="fjStyle(attach.url)"></b>
                        <div class="name" style="width: 165px;" :title="attach.name"
                             v-on:click="look(attach.url)">
                            {{attach.name}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(attach.url)">下载</a>
                        </div>
                    </div>
                    <!--<a href="javascript:void(0);" @click="look(attach.url)"
                                                                                                                      style="color: #2a8cec;">{{attach.name}}</a>--></div></td>
            </tr>
            <tr >
                <td class="td-title">板车及设备照片</td>
                <td colspan="3" class="oa-lineOne text-left"><div v-for="(attach,i) in exitParmsList.devicePictures">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="attach.url">
                        <b :class="fjStyle(attach.url)"></b>
                        <div class="name" style="width: 165px;" :title="attach.name"
                             v-on:click="look(attach.url)">
                            {{attach.name}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(attach.url)">下载</a>
                        </div>
                    </div>
                    <!--<a href="javascript:void(0);" @click="look(attach.url)"
                                                                                                                        style="color: #2a8cec;">{{attach.name}}</a>--></div></td>

            </tr>
            <tr class="oa-lineTwo-H">
                <td class="td-title">备注</td>
                <td colspan="3" class="oa-lineOne" style="text-align: left;padding-left: 4px" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.remark}}
                </td>

            </tr>
            </tbody>
        </table>
    </template>
    <!--移库记录-->
    <template v-if="moveParmsList&&moveParmsList.main.id">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>移库记录</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table">
            <tbody>
            <tr>
                <td class="td-title">出库类型</td>
                <td>移库</td>
                <td class="td-title">出库时间</td>
                <td>{{dateFormat(exitParmsList.main.createTime)}}</td>
            </tr>

            <tr>
                <td class="td-title">原库存地</td>
                <td colspan="3">{{moveParmsList.main.pickUpAddress}}</td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{moveParmsList.main.pickUpContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{moveParmsList.main.pickUpTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">新库存地</td>
                <td colspan="3">{{moveParmsList.main.delivery_address}}</td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{moveParmsList.main.deliveryContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{moveParmsList.main.deliveryTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">运输公司</td>
                <td colspan="3">{{moveParmsList.main.transport_company}}</td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{moveParmsList.main.contacts}}</td>
                <td class="td-title">电话</td>
                <td>{{moveParmsList.main.telephone}}</td>
            </tr>
            <tr>
                <td class="td-title">板车车牌</td>
                <td colspan="3">{{moveParmsList.main.dray_license}}</td>

            </tr>
            <tr>
                <td class="td-title">司机姓名</td>
                <td>{{moveParmsList.main.driver_name}}</td>
                <td class="td-title">司机电话</td>
                <td>{{moveParmsList.main.driver_tel}}</td>
            </tr>
            <tr>
                <td class="td-title">运费(含专票)/元</td>
                <td>{{moveParmsList.main.special_fee}}</td>
                <td class="td-title">扣款(元)</td>
                <td>{{moveParmsList.main.deduction_fee}}</td>
            </tr>
            <tr>
                <td class="td-title">扣款说明</td>
                <td colspan="3">{{moveParmsList.main.deduction_remark}}</td>
            </tr>
            <tr>
                <td class="td-title">运输开始日期</td>
                <td>{{formatDate(exitParmsList.main.transportStartTime)}}</td>
                <td class="td-title">运输结束日期</td>
                <td>{{formatDate(exitParmsList.main.transportEndTime)}}</td>
            </tr>
            <tr>
                <td class="td-title">司机证件</td>
                <td colspan="3"><div v-for="(attach,i) in moveParmsList.devicePictures">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="attach.url">
                        <b :class="fjStyle(attach.url)"></b>
                        <div class="name" style="width: 165px;" :title="attach.name"
                             v-on:click="look(attach.url)">
                            {{attach.name}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(attach.url)">下载</a>
                        </div>
                    </div>
                    <!--<a href="javascript:void(0);" @click="look(attach.url)"
                                                                                           style="color: #2a8cec;">{{attach.name}}</a>--></div></td>

            <tr >
                <td class="td-title">板车及设备照片</td>
                <td colspan="3" class="oa-lineOne text-left"><div v-for="(attach,i) in moveParmsList.devicePictures">
                    <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="attach.url">
                        <b :class="fjStyle(attach.url)"></b>
                        <div class="name" style="width: 165px;" :title="attach.name"
                             v-on:click="look(attach.url)">
                            {{attach.name}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="look(attach.url)">下载</a>
                        </div>
                    </div>
                    <!--<a href="javascript:void(0);" @click="look(attach.url)"
                                                                                                                        style="color: #2a8cec;">{{attach.name}}</a>--></div></td>

            </tr>
            <tr class="oa-lineTwo-H">
                <td class="td-title">备注</td>
                <td colspan="3" class="oa-lineOne" style="text-align: left;padding-left: 4px" @click.stop="showMore($event.target)">{{moveParmsList.main.remark}}</td>

            </tr>
            </tbody>
        </table>
    </template>
    <!--审批进度-->
    <table class="oa-table tableTop">
        <thead>
        <tr class="oa-table-title">
            <th>审批进度</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table">
        <tbody>
        <tr class="oa-table-title-gray">
            <th style="border-top: none">审核人员</th>
            <th style="border-top: none">审核状态</th>
            <th style="border-top: none">审核时间</th>
            <th style="border-top: none">审核意见</th>
        </tr>
        <tr class="oa-table-title-gray">
            <td style="border-top: none;color: #228bee;">{{sampleParmsList.main.auditName}}</td>
            <td style="border-top: none;text-align: center">{{convertAuditFlagToName(sampleParmsList.main.auditFlag)}}</td>
            <td style="border-top: none;color: #228bee;">{{formatDate(sampleParmsList.main.auditTime)}}</td>
            <td style="border-top: none;text-align: center">{{sampleParmsList.main.auditAdvise}}</td>
        </tr>
        </tbody>
    </table>
</div>
</div>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            roleName: '',
            searchParams: {
                id: getUrlParamObj().id,
                userId: getUrlParamObj().userId,
                pageType: getUrlParamObj().pageType,
            },
            outboundParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            moveParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            exitParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            logisticParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            sampleParmsList: {
                attaches: [],//提货信息中附件
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            contract: {
                id: "",
                buyType: "",
                zhihuan: "",
                diankuan: "",
                regionManagerName: "",
                regionManagerId: "",
                companyId: "",
                contractNo: "",
                contractType: ""
            },
            RepaymentPlanList: [],
            deviceParts: [],
            RepaymentPlanNum: {},
            uploader: null,
        },
        methods: {
            formatDate: function (now) {
//                return  NewDate(now).Format(TimeFormat.pcList)
                if(now){
                    return new Date(now).Format(TimeFormat.middle)
                }else{
                    return  "";
                }

            },
            convertAuditFlagToName: function (auditFlag) {
                switch (auditFlag) {
                    case -1:
                        return "未提交";
                        break;
                    case 0:
                        return "审核中";
                        break;
                    case 1:
                        return "通过";
                        break;
                    case 2:
                        return "驳回";
                        break;
                    default:
                        break;
                }
            },
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if (mydiv.offsetParent === null) {
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop + el.getBoundingClientRect().top + el.offsetHeight + "px")
                    } else {
                        mydiv.style.display = 'none';
                    }

                } else {
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            fjStyle: function (fjName) {
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)

                setTimeout(function () {
                    that.hideLoading()
                }, 3000)
            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            },
            dateFormat: function (date) {
                if (date != undefined && date != 'NaN' && date != '') {
                    var da = new Date(date).Format("MM-dd");
                    var dat = new Date(da);
                    var m = dat.getMonth() + 1;
                    var d = dat.getDate();
                    return m + '月' + d + '日';
                } else {
                    return '';
                }
            },
            look: function (url) {
                var param = {
                    url: url,
                }
                JSBridge.call(FILE, 'showFile', param)
            },
            dateCha: function (endDate, startDate) {
                if (endDate != '' && startDate != '') {
                    var sDate = new Date(startDate);
                    var eDate = new Date(endDate);

                    var daCha = (eDate - sDate) / (1000 * 60 * 60 * 24);
                    return daCha + '天';
                } else {
                    return '';
                }

            }
        },
        mounted: function () {

            var that = this;
            that.showLoading();
            axios({
                url: '/deviceSample/getSampleById.json',
                method: 'post',
                data: {"id": getUrlParamObj().id},
            }).then(function (response) {
                that.sampleParmsList.main = response.sampleParmsList;
                that.storeDuration = that.sampleParmsList.main.storeDuration;
                //that.auditHistorys = r.auditHistory;
                if (that.sampleParmsList.main.auditFlag == 0) {
                    that.sampleParmsList.main.auditAdvise = '';
                }
                that.RepaymentPlanList = response.repaymentPlanList;
                that.deviceParts = response.deviceParts;
                that.sampleParmsList.attaches = response.attaches;
                that.sampleParmsList.certificates = response.certificates;
                that.sampleParmsList.devicePictures = response.devicePictures;
                that.sampleParmsList.drayPictures = response.drayPictures;
                if (response.outBoundrecord.id != undefined) {
                    that.outboundParmsList.main = response.outBoundrecord;
                    that.outboundParmsList.certificates = response.outcertificates;
                    that.outboundParmsList.devicePictures = response.outdevicePictures;
                    that.outboundParmsList.drayPictures = response.outdrayPictures;
                    that.contract = response.outBoundrecord.contract;
                }
                if (response.logistics.id != undefined) {
                    that.logisticParmsList.main = response.logistics;
                    that.logisticParmsList.certificates = response.lcertificates;
                    that.logisticParmsList.devicePictures = response.ldevicePictures;
                }
                if (response.exitBoundrecord.id != undefined) {
                    that.exitParmsList.main = response.exitBoundrecord;
                    that.exitParmsList.certificates = response.exitcertificates;
                    that.exitParmsList.devicePictures = response.exitdevicePictures;
                    that.exitParmsList.drayPictures = response.exitdrayPictures;

                }
                if (response.moveBoundrecord.id != undefined) {
                    that.moveParmsList.main = response.moveBoundrecord;
                    that.moveParmsList.certificates = response.movecertificates;
                    that.moveParmsList.devicePictures = response.movedevicePictures;
                    that.moveParmsList.drayPictures = response.movedrayPictures;
                }
                console.log(that.sampleParmsList.main.productionDate)
                console.log(that.sampleParmsList.main.stockTime)
                that.hideLoading();
            }).catch(function (error) {
                that.hideLoading();
            });
            axios({
                url: '/user/getUserViewById.json',
                method: 'post',
                data: {
                    id: getUrlParamObj().userId
                },
            }).then(function (response) {
                that.roleName = response.roleName;
            }).catch(function (error) {
                console.log(error);
            });

        }
    })
</script>
<script>
    //全局点击事件  查看是否有查看更多 有则隐藏


</script>
</body>
</html>